import cssjs from 'jotform-css.js/css.min.js'


// 需求  以CSS 字符串为准
// 处理css 时，当 form 表单改变时添加时，对应 CSS 添加属性 当属性已存在时，覆盖该属性
// 当 css 字符串更改时，处理对应属性，添加修改到对应的表单项中。
// padding,margin,background,font 等CSS 属性简写时，处理对应属性数据。
// 异步 EDITOR 页面对象




function cssToFormObject(cssString) {
    var parser = new cssjs.cssjs();
    var objArray = parser.parseCSS(cssString);

    var obj = {};
    objArray.forEach(element => {
        var _o = {};
        element.rules.forEach(item => {
            _o[item.directive] = item.value;
        });
        obj[element.selector] = _o;
    });

    return obj
}

// 示例CSS字符串
const cssString = `
    .item {
        background-color: #f0f0f0;
        color: #333;
        font-size: 16px;
    }
    .item:focus {
        font-size: 24px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .item:active {
        display: block;
        width: 100%;
        height: 50px;
    }
`;
const commentsRegex = /\/\*[\s\S]*?\*\//g;
// 转换为JSON对象
const jsonObject = cssToFormObject(cssString.replace(commentsRegex, ''));
console.log(jsonObject);



function addOption(css, key, value) {
    if (css[key]) {
        delete css[key]
    };
    css[key] = value;
};







export default cssToFormObject;